<template>
  <el-row :class="config.attributes?.cssClass" class="row-container" v-show="!config.attributes.hidden" :gutter="config.attributes.gutter">
    <el-col v-for="(element, index) in config.children" :key="element.id" :span="element.attributes.span || 12">
      <div class="col-runtime">
        <component v-for="child in element.children" :key="child.id" :is="designer.renderComponent(child)"
          :config="child" />
      </div>
    </el-col>
  </el-row>
</template>

<script setup>
import { inject } from 'vue'
import { ElRow, ElCol } from 'element-plus'

const designer = inject('designer')

defineProps({
  config: {
    type: Object,
    required: true
  }
})
</script>

<style scoped>
.row-container {
  margin: 10px 0;
}

.col-runtime {
  display: flex;
  flex-direction: column;
  margin: 1px;
  padding: 5px;
  gap: 10px;
}
</style>